<html>
    <head>
        <title>钩子函数参数</title>
    </head>
    <body>
        <script>
             // 三、钩子函数参数
                            /*
                                  指令的钩子函数会被传入以下参数：
                                    1.el:        指令所绑定的元素，可以用来直接操作DOM

                                    2.binding:   一个对象，包含以下属性：
                                                 name:       指令名，不包括 v- 前缀。
                                                 value:      指令的绑定值，例如： v-my-directive="1+1" 中，绑定值为2.
                                                 oldValue:   指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
                                                 expression: 字符串形式的指令表达式。 例如 v-my-directive="1+1"中，表达式为 "1+1"
                                                 arg:        传给指令的参数，可选。  例如， v-my-directive:foo 中，参数为"foo"
                                                 modifiers:  一个包含修饰符的对象。  例如， v-my-directive.foo.bar 中，修饰符独享为 { foo: true, bar: true }
                                    3.vnode:      Vue编译生成的虚拟节点。(请移步 "VNode Api"来了解更多详情)
                                    4.oldVnode:   上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用


                                    除了 el 之外，其它参数都应该是只读的，切勿进行修改。
                                    如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
                            */

                            // 这是一个实用了这些 property 的自定义钩子样例：
                                    /*
                                        <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
                                    */

                                        Vue.directive('dome',{
                                                // 自定义指令钩子函数，在指令被绑定到元素时调用。
                                                bind:function(el,binding,vnode){
                                                    var s= JSON.stringify;  // 这是个简写，表示 s 函数等价于JSON.Stringify
                                                    el.innerHTML=
                                                        'name:'+s(binding.name) +'<br>'+ // binding.name 指令名
                                                        'value:'+s(binding.value)+'<br/>'+  // binding.value 指令的绑定值
                                                        'expression:'+s(binding.expreesion)+'<br/>'+ // binding.expression 指令字符串表达式
                                                        'argument:'+s(binding.arg)+'<br/>' + // binding.arg 指令参数
                                                        'modifiers:'+s(binding.modifiers)+'<br/>' + // binding.modifiers 指令修饰符
                                                        'vnode keys:'+ Object.keys(vnode).join(',')
                                                }
                                        })

                                        new Vue({
                                            el:'#hook-arguments-example',
                                            data:{
                                                message:'hello!'
                                            }
                                        });

                                    // DOM中将会显示：
                                        /*
                                            name:"demo"
                                            value:"hello!"
                                            expression:"message"
                                            argument:"foo"
                                            modifiers:{"a":true,"b":true}
                                            vnode keys: tag,data,children,text,elm,ns,context,fnContext,fnOptions,fnScopeId,key,componentOptions,componentInstance,parent,
                                                        raw,isStatic,isRootInsert,isComment,isCloned,isOnce,asyncFactory,asyncMeta,isAsyncPlaceholder
                                        */



                                // ★、动态指令参数
                                        /*
                                            (自定义指令，指令是可以有参数的，指令的参数可以是静态的，也可以是动态的，如果是动态的，那就需要一个绑定语法来定义动态参数。例如：v-mydirective:[argument]="value" 这里的 argument 就是动态参数，它会根据组件实例数据进行更新。
)
                                            指令的参数可以是动态的。
                                            例如，在 v-mydirective:[argument]="value" 中， argument 参数可以根据组件实例数据进行更新！
                                            这使得自定义指令可以在应用中被灵活使用。

                                            例如，你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。

                                            我们可以像这样创建一个通过指令值来更新竖直位置像素值得自定义指令：
                                                <div id="baseexample">
                                                    <p>Scroll down the page </p>
                                                    <p v-pin:"200"> Stick me 200px,from the top of the page</p>
                                                </div>
                                        */

                                            Vue.directive('pin',{
                                                bind:function(el,binding,vnode){
                                                    el.style.position ='fixed'
                                                    el.style.top = binding.value +'px'
                                                }
                                            })


                                            new Vue({
                                                el:'#baseexample'
                                            })

                                        /*
                                            这会把该元素固定在距离顶部200像素的位置。
                                            但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？  
                                            这时，使用动态参数就可以非常方便地根据每个组件实例来进行更新。

                                                例如：
                                                    <div id="dynamicexample">
                                                        <h3>Scroll down inside this section</h3>
                                                        <p v-pin:[direction]="200">I am pinned onto the page to the left</p>
                                                    </div>
                                        */

                                                    Vue.directive('pin',{
                                                        bind:function(el,binding,vnodel){
                                                            el.style.position='fixed'
                                                            var s = (binding.arg=='left'? 'left':'top')
                                                            el.style[s] = binding.value+'px'
                                                        }
                                                    })

                                                    new Vue({
                                                        el:'#dynamicexample',
                                                        data:function(){
                                                            return {
                                                                direction:'left'
                                                            }
                                                        }
                                                    });

                                                // 这样这个自定义指令现在的灵活性就足以支持一些不同的用例了。
        </script>
    </body>
</html>